<template>
  <div>
    <card :_Title="i18nText('address.shippingAddress', '收货地址')" :_More="i18nText('address.addNewAddress', '添加新地址')" _Src="/home/addAddress"></card>
    <div class="address-box" v-for="(item, index) in list" :key="index">
      <div class="address-header">
        <span>
          {{ item.name }}
          <Tag class="ml_10" v-if="item.isDefault" color="red">{{ i18nText('address.defaultShippingAddress', '默认地址') }}</Tag>
          <Tag class="ml_10" v-if="item.alias" color="warning">{{item.alias}}</Tag>
        </span>
        <div class="address-action">
          <span @click="edit(item.id)"><Icon type="edit"></Icon>{{ i18nText('common.edit', '修改') }}</span>
          <span @click="del(item.id)"><Icon type="trash-a"></Icon>{{ i18nText('common.delete', '删除') }}</span>
        </div>
      </div>
      <div class="address-content">
        <p>
          <span class="address-content-title">{{ i18nText('address.country', '国家') }}:</span> {{ item.countryName }}
        </p>
        <p>
          <span class="address-content-title">{{ i18nText('address.consignee', '收货人') }}  :</span> {{ item.name }}
        </p>
<!--        <p>
          <span class="address-content-title">收货地区:</span
          >{{ item.consigneeAddressPath | unitAddress }}
        </p>-->
        <p>
          <span class="address-content-title">{{ i18nText('address.addressLine1', '详细地址') }}:</span> {{ item.detail }}
        </p>
        <p>
          <span class="address-content-title">{{ i18nText('address.cityTown', '城市') }}:</span> {{ item.cityName }}
        </p>
        <p>
          <span class="address-content-title">{{ i18nText('address.provinceRegionState', '地区') }}:</span> {{ item.region }}
        </p>
        <p>
          <span class="address-content-title">{{ i18nText('address.postalZIPCode', '邮政编码') }}:</span> {{ item.postalCode }}
        </p>
        <p>
          <span class="address-content-title">{{ i18nText('personInfo.phoneNumber', '手机号码') }}:</span> {{ item.mobile }}
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import card from '@/components/card';
import { memberAddress, delMemberAddress } from '@/api/address.js';
import options from "@/store/global-address";
import { i18nText } from '@/utils/i18n'

export default {
  name: 'MyAddress',

  data () {
    return {
      list: [] // 地址列表
    };
  },
  created() {
    // 国家
    let countries = []
    // 州
    let stateMap = new Map()
    options.forEach(continent => {
      continent.childrens.forEach(country => {
        countries.push(country)
        stateMap.set(country.id, country.childrens)
      })
    })
    countries = countries.sort((a, b) => a.name_en.localeCompare(b.name_en))
    this.countries = countries
    this.stateMap = stateMap
  },
  methods: {
    edit (id) {
      // 编辑地址
      this.$router.push({ path: '/home/addAddress', query: { id: id } });
    },
    del (id) {
      // 删除地址
      this.$Modal.confirm({
        title: i18nText('common.reminder', '提示'),
        content: i18nText('address.sureDeleteThisShippingAddress', '你确定删除这个收货地址'),
        onOk: () => {
          delMemberAddress(id).then((res) => {
            if (res.success) {
              this.$Message.success(i18nText('common.deleted', '删除成功'));
              this.getAddrList();
            }
          });
        },
        onCancel: () => {
          this.$Message.info(i18nText('common.undelete', '取消删除'));
        }
      });
    },
    getAddrList () {
      // 获取地址列表
      memberAddress().then((res) => {
        if (res.success) {
          const list = res.result.records;
          list.forEach(item => {
            if (item.countryId) {
              item.countryName = this.countries.filter(country => item.countryId === country.id)[0].name_en
            }
          })
          this.list = list
        }
      });
    }
  },
  mounted () {
    this.getAddrList();
  }
};
</script>

<style scoped lang="scss">
.address-box {
  padding: 15px;
  margin: 15px;

  border-bottom: 1px solid $border_color;
}

.address-header {
  cursor: pointer;
  height: 35px;
  display: flex;
  justify-content: space-between;
  @include title_color($light_title_color);
  font-size: 18px;
}

.address-content {
  cursor: pointer;
  font-size: 14px;

  > p {
    padding: 12px 0;
  }
}

.address-content-title {

}

.address-action span {
  margin-left: 15px;
  font-size: 14px;
  color: $theme_color;
  cursor: pointer;
}

#map-container {
  width: 500px;
  height: 300px;
}
</style>
